<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2023-12-07 17:11:05
 * @LastEditors: 陈波
 * @LastEditTime: 2024-02-27 16:39:47
 * @Description: 
 * @FilePath: \graDesign\src\views\User\RetrievePassword\components\SecurityTool.vue
-->
<template>
  <div class="securityToolContainer">
    <el-radio-group v-model="radioCheck" class="radio-group">
      <el-radio
        v-for="(item, index) in radioList"
        :key="index"
        :label="item.label"
        :size="item.size"
        :border="item.border"
      >
        {{ item.name }}
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia';
// store
import useForgetPwd from "@/store/forgetPwd";

const forgetPwdStore = useForgetPwd();
const {
  verifyWay
} = storeToRefs(forgetPwdStore);

let radioCheck = ref<string>("mb_verify");

onMounted(() => {
  // console.log('verifyWay.value', verifyWay.value)
  if(verifyWay.value) {
    radioCheck.value = verifyWay.value;
  }
})

interface RadioItem {
  label: string;
  name: string;
  size: "large" | "default" | "small";
  border: boolean;
}

const radioList: Array<RadioItem> = [
  {
    label: "mb_verify",
    name: "密保验证方式：通过回答密保问题的方式找回密码",
    size: "large",
    border: false,
  },
  {
    label: "face_verify",
    name: "人脸验证方式：通过人脸识别的方式找回密码",
    size: "large",
    border: false,
  },
];

// watchEffect(() => {
//   forgetPwdStore.setVerifyWay(radioCheck.value);
// })

watch(() => radioCheck, () => {
  forgetPwdStore.setVerifyWay(radioCheck.value);
}, { deep: true })

</script>

<style scoped lang="scss">
.securityToolContainer {
  padding: 20px;
  width: 50%;
  margin: 5vh auto;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  .radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}
</style>
